<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/font-awesome.min.css">

    <title>图书检索</title>
    <style>
        .my-ctl {
            margin: 5px 5px 5px 0px;
        }
    </style>
</head>

<body>

<div id="app">
    <form class="form-inline">
        <div class="input-group my-ctl">
            <div class="input-group-prepend">
                <div class="input-group-text">图书名称</div>
            </div>
            <input type="text" class="form-control" v-model="query.b_name">
        </div>

        <div class="input-group my-ctl">
            <div class="input-group-prepend">
                <div class="input-group-text">图书编号</div>
            </div>
            <input type="text" class="form-control" v-model="query.b_id">
        </div>
        <div class="input-group my-ctl">
            <div class="input-group-prepend">
                <div class="input-group-text">作者</div>
            </div>
            <input type="text" class="form-control" v-model="query.b_writer">
        </div>
        <div class="input-group my-ctl">
            <div class="input-group-prepend">
                <div class="input-group-text">出版社</div>
            </div>
            <input type="text" class="form-control"v-model="query.b_pulish" >
        </div>
        <div class="input-group my-ctl">
            <div class="input-group-prepend">
                <div class="input-group-text">关键字</div>
            </div>
            <input type="text" class="form-control" v-model="query.b_keyword">
        </div>
        <button type="button" class="btn btn-primary" @click="goPage(1)" >查询</button>

    </form>


    <table class="table">
        <thead>
        <tr>
            <th>图书名称</th>
            <th>图书编号</th>
            <th>作者</th>
            <th>出版社</th>
            <th>出版日期</th>
            <th>价格</th>
        </tr>
        </thead>
        <tbody>
        <!--循环dataList里的数据，每行数据的唯一标志key-->
        <tr v-for="item in page.list" :key="item.b_id">
            <td>{{item.b_name}}</td>
            <td>{{item.b_id}}</td>
            <td>{{item.b_writer}}</td>
            <td>{{item.b_publish}}</td>
            <td>{{item.b_putime}}</td>
            <td>{{item.b_price}}</td>


        </tr>
        </tbody>
    </table>
    <nav aria-label="Page navigation example">
        <ul class="pagination" style="display: flex;align-items: center;">

            <li class="page-item" style="margin-right: 10px">
                <div class="input-group my-ctl">
                    <div class="input-group-prepend">
                        <div class="input-group-text">每页</div>
                    </div>
                    <select class="custom-select" style="width: 70px;" v-model="query.pageSize" @change="goPage(1)">
                        <option v-for="pageSize in [2,4,5,10]" :value="pageSize">{{pageSize}}</option>
                    </select>
                    <div class="input-group-append">
                        <div class="input-group-text">条记录</div>
                    </div>
                </div>
            </li>

            <li class="page-item"><a class="page-link" href="#" @click.prevent="goPage(1)">首页</a></li>
            <li class="page-item"><a class="page-link" href="#" @click.prevent="goPage(page.pre)">上页</a></li>
            <li class="page-item"><a class="page-link" href="#" @click.prevent="goPage(page.next)">下页</a></li>
            <li class="page-item"><a class="page-link" href="#" @click.prevent="goPage(page.last)">尾页</a></li>

            <li class="page-item" style="margin-left: 10px;">
                当前第<input style="border: 1px solid #eeeeee;width: 30px;text-align: center;margin: 0px 3px" type="text"
                          v-model="query.pageNum" @blur="goPage(query.pageNum)"/>页{{page.size}}条记录，共{{page.pages}}页{{page.total}}条记录.
            </li>
        </ul>
    </nav>
</div>

<script src="../js/jquery-3.6.0.slim.min.js"></script>
<script src="../js/bootstrap.bundle.min.js"></script>
<script src="../js/vue.global.js"></script>
<script src="../js/axios.min.js"></script>
<script src="../js/my-axios.js"></script>
<script src="../layer/layer.js"></script>

<script>

    const app = {
        data() {
            return {
                query: {
                    pageNum: 1,
                    pageSize: 5,
                    b_name: '',
                    b_id: '',
                    b_writer: '',
                    b_publish: '',
                    b_putime: '',
                    b_price: '',
                    b_keywords: ''

                },

                page: {},

                booksList: [],

            };
        },

        methods: {

            //分页跳转
            goPage(pageNum, pageSize) {
                if (pageNum) {
                    this.query.pageNum = pageNum;
                    if (pageSize) {
                        this.query.pageSize = pageSize;
                    }
                } else {
                    this.query.pageNum = 1;
                }

                this.getBooksList();
            },

            getBooksList() {
                const loadIdx = layer.load();
                myAxios.get('/books', {params: this.query}).then((response) => {
                    layer.close(loadIdx);

                    this.page = response.data.data;
                    this.query.pageNum = this.page.current//用服务端数据矫正客户端
                    this.query.pageSize = this.page.pageSize;//用服务端数据矫正客户端
                });
            },

        },
        mounted() {
            this.getBooksList();
            this.goPage(1);
        },
    };

    Vue.createApp(app).mount('#app')
</script>
</body>

</html>